<template>
	<view>
		<view class="notice">
			<u-notice-bar :text="notice" bgColor='#fff' color="rgba(94, 103, 110, 1)"></u-notice-bar>
		</view>
		<view class="feedCon">
			<view class="one">
				<text class="title">反馈类型</text>
				<view class="radioCon">
					<u-radio-group class="radioGroup" size='20' v-model="radiovalue" placement="row">
						<u-radio activeColor="#44D4A8" v-for="(item, index) in radiolist" :key="index"
							:label="item.name" :name="item.name">
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="one mt24">
				<text class="title">问题描述：</text>
				<view class="textAreCon">
					<u--textarea :customStyle="accountCustomStyle" border='none' height='113'
						placeholder="请具体描述故障问题"></u--textarea>
				</view>
			</view>
			<view class="one mt24">
				<text class="title">上传故障照片（最多3张）</text>
				<view class="imageCon">
					<view class="uploadBtn">
						<view class="iconfont icon-xiangce">
						</view>
						<text>添加照片</text>
					</view>
					<view class="imageItem">
						<view class="close">
							<view class="iconfont icon-guanbi">
							</view>
						</view>
						<image src="/static/images/nav-tag-1.png" mode=""></image>
					</view>
					<view class="imageItem">
						<view class="close">
							<view class="iconfont icon-guanbi">
							</view>
						</view>
						<image src="/static/images/nav-tag-1.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="commonBtn">
			<view class="btnCon">
				<text>提交</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				accountCustomStyle: {
					backgroundColor: 'rgba(246, 248, 252, 1)',
					borderRadius: '16rpx'
				},
				notice: '此投诉为本应用自有投诉渠道，非官方投诉渠道',
				radiovalue: '轻微故障',
				radiolist: [{
						name: '轻微故障',
					},
					{
						name: '一般故障',
					},
					{
						name: 'bug反馈',
					}
				]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>

	.mt24 {
		margin-top: 24rpx;
	}

	.title {
		height: 42rpx;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 40.54rpx;
		color: rgba(54, 68, 79, 1);
	}

	.feedCon {
		padding: 24rpx 32rpx 0 32rpx;

		.one {
			position: relative;
			border-radius: 16rpx;
			background: rgba(255, 255, 255, 1);
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			padding: 24rpx;

			.radioCon {
				position: relative;
				width: 100%;
				margin-top: 32rpx;
			}

			.textAreCon {
				width: 100%;
				margin-top: 32rpx;
			}

			.imageCon {
				margin-top: 32rpx;
				display: flex;
				align-items: center;

				.imageItem {
					position: relative;

					.close {
						position: absolute;
						right: 0;
						top: 0rpx;
						width: 32rpx;
						height: 32rpx;
						border-radius: 0rpx 8rpx 0rpx 0rpx;
						background: #6C6C6C;
						z-index: 1;
						color: #fff;
						font-size: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					image {
						width: 156rpx;
						height: 156rpx;
						margin-left: 16rpx;
						border-radius: 8rpx;
					}
				}

				.uploadBtn {
					width: 156rpx;
					height: 156rpx;
					border-radius: 12rpx;
					background: rgba(250, 250, 250, 1);
					border: 2rpx solid rgba(236, 236, 236, 1);
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 40.54rpx;
					color: rgba(152, 160, 166, 1);

					text {
						margin-top: 24rpx;
					}

					.iconfont {
						font-size: 38rpx;
					}
				}
			}
		}
	}

	.notice .u-icon__icon {
		color: rgba(76, 212, 230, 1) !important;
	}

	::v-deep .notice .u-icon__icon {
		color: rgba(76, 212, 230, 1) !important;
	}

	.radioGroup {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}
</style>